<template>
    <div>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="usernameR"
                    name="账号"
                    label="账号"
                    placeholder="请输入账号"
                    :rules="[{ required: true, message: '请输入账号' }]"
            />
            <van-field
                    v-model="passwordR"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-form>
        <van-cell-group>
            <van-field
                    v-model="usernameN"
                    label="昵称"
                    placeholder="请输入昵称"
            />
            <van-field
                    v-model="phone"
                    label="手机号"
                    placeholder="请输入手机号"
            />
        </van-cell-group>
        <van-field
                v-model="sms"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
        >
            <template #button>
                <van-button size="small" type="primary" @click="yanzhengMa">{{flag?'发送验证码':num}}</van-button>
<!--                <van-button size="small" type="primary" v-else>{{num}}</van-button>-->
            </template>
        </van-field>
        <van-button type="info" size="large" style="margin-top: 20px" @click="regis">注册</van-button>
    </div>
</template>

<script>
    import {registered, testing} from '../api/api'
    import {Toast} from "vant";
    export default {
        name: "Registered",
        data() {
            return {
                usernameR: '',
                passwordR: '',
                usernameN:'',
                phone:'',
                sms:'',
                timer:null,
                num:60,
                flag:true
            };
        },
        methods: {
            onSubmit(values) {
                console.log('submit', values);
            },
            regis(){

                registered(this.usernameR,this.sms,this.phone,this.passwordR,this.usernameN).then(res=>{
                    console.log(res)
                    if(res.code==0){
                        Toast(res.msg);
                        this.$router.push('/login')
                    }else if(res.code==500){
                        Toast("该手机号已注册");
                    }
                })
            },
            yanzhengMa(){
                console.log(this.phone)

                if(this.phone&&this.phone.length==11){
                    clearInterval(this.timer)
                    this.flag=false

                    this.timer=setInterval(()=>{
                        this.num--;
                        if(this.num==0){
                            clearInterval(this.timer)
                            this.flag=true
                            this.num=60;

                        }
                    },1000)
                }else{
                    Toast("请输入正确手机号");
                }
                testing(this.phone).then((res)=>{
                    console.log(res)
                })
            }
        },
    }
</script>

<style scoped>

</style>